<template>
  <div class>
    <el-form ref="form" :model="formData" label-width="100px">
      <!-- <el-collapse v-model="activeNames"> -->
      <el-collapse v-model="activeNames">
        <el-collapse-item title="基本信息" name="1" disabled>
          <el-form-item label="品牌" prop="brand">
            <el-input
              v-model="formData.brand"
              placeholder="请输入品牌"
              :maxlength="11"
              show-word-limit
              clearable
              :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
          <el-form-item label="厂商" prop="aa">
            <el-input v-model="formData.aa" placeholder="请输入厂商" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="属性分类" prop="extendType">
            <el-select
              v-model="formData.extendType"
              placeholder="请选择属性分类"
              clearable
              :style="{width: '100%'}"
              @change="chgType"
            >
              <el-option v-for="(item, index) in extendTypeOptions" :key="index" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
        </el-collapse-item>

        <el-collapse-item title="更多信息" name="2">
          <el-row>
            <el-col :span="12" v-for="(item,index) in extendFileds" :key="item.id" >
                    <el-form-item :label="item.name" >
                      <el-input v-model="item.code" placeholder="请输入" @input="intputchage($event)"/>
                    </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>

        <!-- <el-form-item
          v-for="(domain) in infoextList"
          :label="domain.code"
          :key="domain.code"
          :prop="domain.value "
          :rules="{
            required: false, message: domain.code +'不能为空', trigger: 'blur'
          }"
        >
          <el-input v-model="domain.value" placeholder="请输入"></el-input>
        </el-form-item>-->
      </el-collapse>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { extendType, extFiled, addExtFiled } from "@/api/extend";

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      activeNames: "1",
      formData: {
        brand: "",
        aa: "",
        extendType: "",
      },
      extendFileds: [],
      extendData: [],
      extendTypeOptions: [],
      attributeVisiable: false,
      attributeAdd: false,
      attributeForm: {},
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    //属性分类下拉改变时，扩展属性重新查询展示
    chgType(_val) {
      extFiled(_val).then(res => {
        this.extendFileds = res.data;
      })
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    extendType().then(res => {
      this.extendTypeOptions = res.data;
    });
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
</style>
